<template>

    <div class="bg-white shadow">
        <nav class="flex flex-col sm:flex-row  bg-gray-200   mb-2">

            <button
                class=" py-4 px-4 block transform hover:text-blue-500  hover:scale-105 focus:outline-none  border-b-3 font-bold "
                v-for="(tab, index) in tabs" :key="index"
            >

                <router-link :to="{ name: tab.name,params:tab.params }" class="pb-4 "
                             :class="{active: $route.name == tab.name }" v-if="!tab.current || $route.name == tab.name"
                >
                    {{ tab.title }}
                </router-link>
            </button>
        </nav>
    </div>
</template>

<script>
export default {
    props: ['tabs'],
    methods: {
        goBack() {

        }
    }
}
</script>

<style scoped lang="scss">
.active {
    border-bottom-width: 2px;
    border-color: rgba(59, 130, 246);
}

</style>
